<template>
  <div class="card-wrapper">
    <el-main class="form-card container-card">
      <div class="card-header">
        <span class="header-title">新增船舶预警</span>
        <div class="header-line"></div>
      </div>

      <el-form label-width="180px" :model="form" :rules="rules" ref="formRef" class="form-container">
        <el-row :gutter="40">
          <el-col :xs="24" :sm="12" :md="10" :lg="11">
            <div class="left-form">
              <el-form-item label="预警名称：" class="form-item" prop="earlyWarningInfo.title">
                <el-input v-model="form.earlyWarningInfo.title" placeholder="请输入预警名称" disabled />
              </el-form-item>

              <el-form-item label="船名：" class="form-item" prop="shipEarlyWarning.shipName">
                <el-input v-model="form.shipEarlyWarning.shipName" placeholder="请输入船名" />
              </el-form-item>

              <el-form-item label="MMSI：" class="form-item" prop="shipEarlyWarning.mmsi">
                <el-input v-model="form.shipEarlyWarning.mmsi" placeholder="请输入MMSI编号" />
              </el-form-item>

              <el-form-item label="船舶类型：" class="form-item" prop="shipEarlyWarning.shipType">
                <el-select v-model="form.shipEarlyWarning.shipType" placeholder="请选择船舶类型" style="width: 100%">
                  <el-option
                    v-for="item in shipTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <!-- 统一选择器样式 -->
              <el-form-item label="预警级别：" class="form-item" prop="earlyWarningInfo.warnLevel">
                <el-select v-model="form.earlyWarningInfo.warnLevel" placeholder="请选择预警级别" style="width: 100%">
                  <el-option
                    v-for="item in warnLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :class="`option-level-${item.value}`"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="发生时间：" class="form-item" prop="shipEarlyWarning.createTime">
                <el-date-picker
                  v-model="form.shipEarlyWarning.createTime"
                  type="datetime"
                  placeholder="选择日期和时间"
                  style="width: 100%"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>

              <el-form-item label="事件内容：" class="form-item" prop="shipEarlyWarning.eventContent">
                <el-input v-model="form.shipEarlyWarning.eventContent" placeholder="请输入事件内容" />
              </el-form-item>
            </div>
          </el-col>

          <el-col :xs="24" :sm="12" :md="14" :lg="12">
            <div class="right-section">
              <div class="right-form">
                <el-form-item label="定位信息：" class="form-item">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="经度：" prop="shipEarlyWarning.lon" label-width="100px">
                        <el-input v-model="form.shipEarlyWarning.lon" placeholder="经度" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="纬度：" prop="shipEarlyWarning.lat" label-width="100px">
                        <el-input v-model="form.shipEarlyWarning.lat" placeholder="纬度" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="发生地点：" class="form-item" prop="shipEarlyWarning.place">
                  <el-input v-model="form.shipEarlyWarning.place" placeholder="请输入发生地点" />
                </el-form-item>

                <el-form-item label="禁航需求：" class="form-item" prop="earlyWarningInfo.navigationClosure">
                  <el-radio-group v-model="form.earlyWarningInfo.navigationClosure">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="预警状态：" class="form-item" prop="earlyWarningInfo.status">
                  <el-radio-group v-model="form.earlyWarningInfo.status">
                    <el-radio :label="0">未处理</el-radio>
                    <el-radio :label="1">已处理</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <div style="width: 100%">
                    <div class="form-actions">
                      <el-button @click="resetForm" class="cancel-btn">重置表单</el-button>
                      <el-button type="primary" @click="submitForm" class="submit-btn">提交预警</el-button>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { listData } from '@/api/system/dict/data';
import { DictDataQuery } from '@/api/system/dict/data/types';
import dayjs from 'dayjs';
import router from '@/router';
import { addShipWarning } from '@/api/bridge/traffic/ship';
import { ElMessage } from 'element-plus';

const queryParams = ref<DictDataQuery>({
  dictType: '',
  pageNum: 1,
  pageSize: 10,
  dictName: '',
  dictLabel: ''
});

const formRef = ref();

const warnLevelList = ref([]);
const shipTypeList = ref([]);

function getWarnLevelList() {
  queryParams.value.dictType = 'warn_level';
  listData(queryParams.value).then((res) => {
    warnLevelList.value = res.rows.map((item) => ({
      label: item.dictLabel,
      value: item.dictValue
    }));
  });
}

function getShipTypeList() {
  queryParams.value.dictType = 'ship_type';
  listData(queryParams.value).then((res) => {
    shipTypeList.value = res.rows.map((item) => ({
      label: item.dictLabel,
      value: item.dictValue
    }));
  });
}

// 表单数据
const form = ref({
  // earlyWarningInfo 部分 - 主表
  earlyWarningInfo: {
    title: "船舶预警",
    warnLevel: null,
    navigationClosure: 0,
    status: 0
  },
  // shipEarlyWarning 部分 - 副表
  shipEarlyWarning: {
    shipName: null,
    mmsi: null,
    shipType: null,
    eventContent: null,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    lon: null,
    lat: null,
    place: "",
    type: 0
  }
});

// 在script部分更新校验规则
const rules = ref({
  'earlyWarningInfo.title': [{ required: true, message: '预警标题不能为空', trigger: 'blur' }],
  'earlyWarningInfo.warnLevel': [{ required: true, message: '请选择预警级别', trigger: 'blur' }],
  'shipEarlyWarning.shipName': [{ required: true, message: '请输入船名', trigger: 'blur' }],
  'shipEarlyWarning.mmsi': [{ required: true, message: '请输入MMSI编号', trigger: 'blur' }],
  'shipEarlyWarning.shipType': [{ required: true, message: '请选择船舶类型', trigger: 'blur' }],
  'shipEarlyWarning.eventContent': [{ required: true, message: '请输入事件内容', trigger: 'blur' }],
  'shipEarlyWarning.createTime': [{ required: true, message: '请选择发生时间', trigger: 'blur' }],
  'shipEarlyWarning.lon': [{ required: true, message: '请输入经度', trigger: 'blur' }],
  'shipEarlyWarning.lat': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
  'shipEarlyWarning.place': [{ required: true, message: '请输入发生地点', trigger: 'blur' }],
  'earlyWarningInfo.navigationClosure': [{ required: true, message: '请选择禁航需求', trigger: 'blur' }],
  'earlyWarningInfo.status': [{ required: true, message: '请选择预警状态', trigger: 'blur' }]
});

// 重置表单
const resetForm = () => {
  form.value = {
    earlyWarningInfo: {
      title: "船舶预警",
      warnLevel: null,
      navigationClosure: 0,
      status: 0
    },
    shipEarlyWarning: {
      shipName: null,
      mmsi: null,
      shipType: null,
      eventContent: null,
      createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      lon: null,
      lat: null,
      place: "",
      type: 0
    }
  };
};

// 更新提交表单函数，取消注释验证代码
const submitForm = async () => {
  await formRef.value.validate();
  const submitData = {
    earlyWarningInfo: {
      title: form.value.earlyWarningInfo.title,
      warnLevel: form.value.earlyWarningInfo.warnLevel,
      navigationClosure: form.value.earlyWarningInfo.navigationClosure,
      status: form.value.earlyWarningInfo.status
    },
    shipEarlyWarning: {
      shipName: form.value.shipEarlyWarning.shipName,
      warningId: form.value.earlyWarningInfo.warnLevel,
      mmsi: form.value.shipEarlyWarning.mmsi,
      shipType: form.value.shipEarlyWarning.shipType,
      eventContent: form.value.shipEarlyWarning.eventContent,
      createTime: form.value.shipEarlyWarning.createTime,
      lon: form.value.shipEarlyWarning.lon,
      lat: form.value.shipEarlyWarning.lat,
      place: form.value.shipEarlyWarning.place,
      type: form.value.shipEarlyWarning.type
    }
  };
  console.log('提交数据', submitData);
  const res = await addShipWarning(submitData);
  if (res.code === 200) {
    ElMessage.success('提交成功');
    await router.push('/early-warning/group/ship');
  }
};

getWarnLevelList();
getShipTypeList();
</script>

<style scoped lang="scss">
.card-wrapper {
  position: relative;
  height: 100%;
  background: var(--el-bg-color-page);
  border-radius: 8px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
  }
}

.form-card {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--el-bg-color-overlay);
  padding: 20px 30px;
  border-radius: 8px;

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 16px 20px;
  }

  .card-header {
    margin-bottom: 25px;

    .header-title {
      font-size: 20px;
      color: var(--el-text-color-primary);
      font-weight: 600;
    }

    .header-line {
      height: 3px;
      background: linear-gradient(90deg, #409eff 30%, transparent);
      margin-top: 12px;
    }
  }

  .form-container {
    flex: 1;
    min-height: 600px;
    padding: 0 15px;
    display: flex;
    flex-direction: column;

    .el-col {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .left-form {
      border-right: 1px dashed #e4e7ed;
      padding-right: 40px;
      height: 100%;
    }

    .right-section {
      padding-left: 40px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .sub-title {
        font-size: 16px;
        margin-bottom: 25px;
        padding-left: 12px;
        border-left: 4px solid transparent;
      }
    }
  }

  .form-item {
    margin-bottom: 28px;

    :deep(.el-form-item__label) {
      font-size: 14px;
      color: var(--el-text-color-primary);
    }

    .el-input,
    .el-select,
    .el-date-editor {
      :deep(.el-input__inner) {
        line-height: 1.5;
        background: var(--el-input-bg-color);
        border-color: var(--el-input-border-color);
        color: var(--el-text-color-primary);
      }
    }
  }

  .checkbox-group {
    width: 50%;
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .el-checkbox {
      margin: 4px 0;
    }
  }

  .form-divider {
    margin: 28px 0;
    background-color: #e4e7ed;
  }

  .form-actions {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;

    .el-button {
      padding: 12px 24px;
    }
  }
}

@media (max-width: 768px) {
  .form-card {
    height: auto;
    padding: 15px;

    .form-container {
      .left-form {
        border-right: none;
        padding-right: 0;
      }

      .right-section {
        padding-left: 0;
        margin-top: 20px;
      }
    }

    .form-actions {
      flex-direction: column;
      gap: 12px;
    }
  }
}

// 预警级别颜色标识
.option-level-1 {
  color: #f56c6c;
  font-weight: 500;
}

.option-level-2 {
  color: #e6a23c;
  font-weight: 500;
}

.option-level-3 {
  color: #409eff;
  font-weight: 500;
}

.option-level-4 {
  color: #67c23a;
  font-weight: 500;
}
</style>
